import {
  View,
  Text,
  Image,
  StyleSheet,
  LayoutChangeEvent,
  Pressable,
} from 'react-native'
import { flexCol } from '../../assets/style/common'
import Price from '../price'
import { useContext, useEffect, useMemo, useState } from 'react'
import { NavigationContext } from '@react-navigation/native'
type GoodCardProps = {
  imgW?: number
  imgH?: number
  source: any
  title?: string
  price: string | number
  sale?: number
  interDiscount?: number
  onLayout?: (e: { width: number; height: number }) => void
}
export default function GoodCard(props: GoodCardProps) {
  const nav = useContext(NavigationContext)
  const [imgWH, setImgWH] = useState({ width: 0, height: 0 })
  const [layoutWH, setLayoutWH] = useState({ width: 0, height: 0 }) // 宽度

  const setLayout = () => {
    if (imgWH.width && layoutWH.width) {
      props.onLayout &&
        props.onLayout({
          width: layoutWH.width,
          height: imgWH.height + layoutWH.height,
        })
    }
  }
  useEffect(() => {
    const { width, height } = Image.resolveAssetSource(props.source)
    setImgWH({ width, height })
    setLayout()
  }, [])
  const imgH = useMemo(() => {
    if (imgWH.height === 0) return 0
    const height = (imgWH.height / imgWH.width) * layoutWH.width
    return height
  }, [imgWH, layoutWH.width])

  function onLayout(e: LayoutChangeEvent) {
    const { width, height } = e.nativeEvent.layout
    if (layoutWH.width === 0) {
      setLayoutWH({ width, height })
      if (imgWH.width && width) {
        const params = {
          width,
          height: (imgWH.height / imgWH.width) * width + height,
        }
        props.onLayout && props.onLayout(params)
      }
    }
  }

  function onGoodDetail() {
    nav?.navigate('GoodDetail')
  }
  return (
    <Pressable
      style={[
        cardStyles.card,
        {
          opacity: imgH ? 1 : 0,
        },
      ]}
      onPress={onGoodDetail}
    >
      <Image
        style={StyleSheet.compose(cardStyles.cover, {
          width: '100%',
          height: imgH || 88,
        })}
        source={props.source}
      />
      <View style={cardStyles.btm} onLayout={onLayout}>
        <Text style={cardStyles.title}>{props.title}</Text>
        <View style={flexCol.default}>
          <Price price={props.price + ''} />
          <Text style={cardStyles.payCount}>{props.sale}人已付款</Text>
        </View>
        {!!props.interDiscount && (
          <Text style={cardStyles.inter}>积分抵扣{props.interDiscount}元</Text>
        )}
      </View>
    </Pressable>
  )
}
const cardStyles = StyleSheet.create({
  card: {
    borderRadius: 6,
    backgroundColor: '#fff',
    marginBottom: 12,
  },
  cover: {
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,
    resizeMode: 'cover',
  },
  btm: {
    padding: 8,
  },
  title: {
    color: '#333333',
    fontSize: 14,
    marginBottom: 4,
  },
  payCount: {
    color: '#888888',
    fontSize: 10,
    paddingTop: 2,
    paddingLeft: 12,
  },
  inter: {
    fontSize: 10,
    color: '#f3bc38',
    marginTop: 4,
  },
})
